a
    transition: opacity .4s ease, color .4s ease
    text-decoration: none
    text-transform: uppercase
    color: white
    opacity: 0.6
    &:hover
        opacity: 1

.sidebar
    .sidebar-content
        padding: 10px
    @media (max-width: 1023px)
        display: none
    width: 240px
    border-left: 1px solid #2e2e33
    header
        background-size: 32px
        background-position: 12px 13px
        background-repeat: no-repeat
        height: 40px
        padding: 10px 0 10px 55px
        align-items: center
        display: flex
    ul,ol  
        list-style: none
        padding: 0px
        margin: 0px
        font-size: 16px

    .menu
        padding: 20px
        li 
            &.li-active
                &:before
                    background-color: $protruding-color
                    opacity: 1
                a
                    opacity: 1
                    color: $protruding-color
            align-items: center
            display: flex
            position: relative
            font-size: 100%
            &:first-child
                padding-left: 0
                padding-top: 10px
                padding-bottom: 10px
                &:before
                    display: none
                a
                    padding: 0
            &:before
                opacity: .6
                transition: background-color .4s ease, color .4s ease
                content: ""
                display: inline-block
                width: 1px
                height: 14px
                background-color: white
                position: absolute
            a
                display: block
                padding-left: 15px
                line-height: 20px
                font-size: 100%

.content
    width: 100%

.avatar
    max-width: 100px

.divider
    margin: 30px 60px
    height: 1px
    margin: -1px 0 0 0
    border: none
    background-color: rgba(255,255,255,.12)
.me-content
    margin-bottom: 16px
    text-transform: none
    p
        opacity: .6
        margin: 4px 0px
        transition: opacity 0.4s ease
        display: flex
        justify-content: center
        &:hover
            opacity: 1
        a   
            text-transform: none
            height: 20px
            line-height: 20px
            opacity: 1
            font-size: 16px
        i
            padding-right: 5px
            font-size: 18px
.my-tag
    display: flex
    flex-wrap: wrap
    justify-content: center
    p
        margin: 10px
        padding: 3px 5px
        border: 1px solid $protruding-color
        border-radius: 10px
        transition: all 700ms ease
        &:hover
            border-radius: 0px

.section
    @media (max-width: 1023px)
        padding: 0 0px
    padding: 0 120px
    text-align: center
    text-transform: capitalize

.snsicon
    display: flex
    flex-wrap: wrap
    justify-content: center
    $snsimg:"/fast/assets/img/sns/ico-"
    a
        width: 14.28%
        max-width: 30px
        padding: 10px
        @media only screen and (max-width: 600px)
            width: 33.32%
        height: 30px
        background-repeat: round
        transition: all .4s ease
        margin: 15px 0px
        background-size: cover
        &:hover
            transform: rotate(-15deg) scale(1.2)
            opacity: 1
        
    .bilibili
        background-image: url($snsimg+"bilibili.svg")
    .facebook
        background-image: url($snsimg+"facebook.svg")
    .github
        background-image: url($snsimg+"github.svg")
    .gplus
        background-image: url($snsimg+"gplus.svg")
    .instagram
        background-image: url($snsimg+"instagram.svg")
    .linkedin
        background-image: url($snsimg+"linkedin.svg")
    .telegram
        background-image: url($snsimg+"telegram.svg")
    .tumblr
        background-image: url($snsimg+"tumblr.svg")
    .twitter
        background-image: url($snsimg+"twitter.svg")
    .weibo
        background-image: url($snsimg+"weibo.svg")
    .zhihu
        background-image: url($snsimg+"zhihu.svg")
    .v2ex
        background-image: url($snsimg+"v2ex.svg")
    .netease-music
        background-image: url($snsimg+"netease-music.svg")
    .discord
        background-image: url($snsimg+"discord.svg")

.my-project
    display: flex
    flex-wrap: wrap
    justify-content: center
    .card
        @media only screen and (max-width: 600px)
            width: 41%
            min-height: 100px
            margin: 5px 5px
        width: 20%
        min-height: 150px
        margin: 16px 10px
        padding: 24px 10px 10px 10px
        border: 1px solid $protruding-color
        cursor: pointer
        position: relative
        align-items: center
        display: flex
        opacity: 1
        
        .card-content
            width: 100%
            height: 100%
            p
                font-size: 12px
                color: $protruding-color
        h3
            position: absolute
            top: 0
            left: 20px
            text-align: left
            font-size: 12px
            text-transform: uppercase
            color: $protruding-color
            font-weight: 400
        &:before
            display: block
            position: absolute
            content: ""
            width: 100%
            height: 100%
            top: 0
            left: 0
            z-index: -1
            transition: all .4s ease
            opacity: 0
        &:hover:before
            background-color: $protruding-color
            opacity: 0.05
.my-posts
    display: flex
    flex-wrap: wrap
    justify-content: center
    .post-card
        @media only screen and (max-width: 600px)
            width: 100%
            min-height: 60px
            margin: 5px 5px
        .post-card-content
            width: 100%
            height: 100%
            text-align: left
            p
                font-size: 12px
                color: $protruding-color
        h3
            position: absolute
            top: 0
            left: 20px
            text-align: left
            font-size: 12px
            text-transform: initial
            color: $protruding-color
            font-weight: 400
        &:before
            display: block
            position: absolute
            content: ""
            width: 100%
            height: 100%
            top: 0
            left: 0
            z-index: -1
            transition: all .4s ease
            opacity: 0
        &:hover:before
            background-color: $protruding-color
            opacity: 0.05
        width: 45%
        min-height: 80px
        margin: 16px 10px
        padding: 40px 10px 10px 10px
        border: 1px solid $protruding-color
        cursor: pointer
        position: relative
        align-items: center
        display: flex
        opacity: 1